<template>
    <div class="case-code-container">
        <div id="bar-case-4" class="chart-container">

        </div>
        <highlightjs class="code" lang="js" :code="code"></highlightjs>
    </div>
</template>

<script setup>
    /**
     * 有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。

使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。
     */
    import { code } from './code/case4';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('bar-case-4');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        myChart.setOption({
            title: { text: '堆叠柱状图' },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: { type: 'value' },
            series: [
                // 系列1
                {
                    name: '销量(男)',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    // ★★★拥有同样 stack 值的系列将堆叠在一组。
                    stack: '销量总量',
                },
                // 系列2
                {
                    name: '销量(女)',
                    type: 'bar',
                    data: [15, 30, 6, 20, 17, 19],
                    // ★★★
                    stack: '销量总量',
                },
            ],
        });
    });
</script>

<style lang="scss" scoped>
</style>
